<template>
  <div class="doctorBox">
    <div class="humanCard">
      <img
        class="headImg"
        :src="dInf.head"
        onerror="this.src='https://img.myzx.cn/video/mysource/image/20200828/5f4869c208ce7.png'"
        alt
      />
      <div class="qrCodebg">
        <vue-qr
          class="qrCode"
          :correctLevel="3"
          colorDark="#0065d2"
          :logoSrc="logoSrc"
          :text="codeUrl"
          :size="100"
          :margin="0"
          :logoMargin="3"
        ></vue-qr>
      </div>
      <div class="cardBox">
        <dl class="cardtext">
          <dt>
            <b>{{dInf.name}}</b>
            <span>{{dInf.profession_view}}</span>
            <i class="medalicon"></i>
          </dt>
          <dd class="exflow2">{{dInf.hospital_name}} {{dInf.department_name}}</dd>
          <dd>
            <span v-show="dInf.tags==''?false:true">{{dInf.tags}}</span>
          </dd>
        </dl>
        <div class="introtext">
          <p>{{textword}}</p>
          <span
            class="introBtn"
            v-if="unfoldshow"
            @click="unfold = !unfold"
          >{{unfold ? '收起' : '展开'}}</span>
        </div>
      </div>
    </div>
    <ul class="choicebar">
      <li>
        <a href="javascript:void(0);" @click="bindBtn(2)">
          <dl>
            <img src="../assets/regis-icon.png" alt />
          </dl>
          <dd>预约挂号</dd>
          <dd>
            <span class="orange">去挂号</span>
          </dd>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);" @click="bindBtn(1)">
          <dl>
            <img src="../assets/live-icon.png" alt />
          </dl>
          <dd>TA的直播</dd>
          <dd>
            <span class="green">去观看</span>
          </dd>
        </a>
      </li>
    </ul>
    <cube-scroll-nav-bar
      id="header_nav"
      class="auto_fixed"
      :class="auto_fixed"
      direction="horizontal"
      :current="current"
      :labels="labels"
      @change="changeHandler"
    />
    <div class="auto_fixed_fake" :style="{display: auto_fixed.fixed ? 'block':'none'}"></div>
    <!-- 内容切换 -->
    <introhome v-if="current == '主页'" :doctor_id="doctor_id"></introhome>
    <dynamic v-if="current == '动态'" :mobile="mobile"></dynamic>
    <div v-for="(item,index) in diseaseList" :key="index">
      <disease
        v-if="current != '主页' && current != '动态' && current==item.name"
        :type="current"
        :doctor_id="doctor_id"
        :disease_id="item.id"
      ></disease>
    </div>
    <div class="shade" v-show="telBlock">
      <div>
        <home-tel :doctor_id="doctor_id" @closechild="closechild"></home-tel>
        <img class="close" @click="telBlock=false" src="../assets/close.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
import { docdata, userCheck } from "../api/captch";
import introhome from "@/components/introhome.vue";
import dynamic from "@/components/dynamic.vue";
import disease from "@/components/disease.vue";
import homeTel from "@/components/homeTel";
import vueQr from "vue-qr";
import wx from "weixin-js-sdk";

export default {
  name: "qecode",
  components: {
    introhome,
    dynamic,
    disease,
    homeTel,
    vueQr
  },
  data() {
    return {
      shows: false,
      dInf: {},
      current: "主页",
      labels: ["主页", "动态"],
      textcontent: "",
      unfold: false,
      unfoldshow: false,
      auto_fixed: {
        fixed: false
      },
      header_height: 0,
      diseaseList: {},
      telBlock: false,
      logoSrc: require("../assets/logo.png"),
      doctor_id: "",
      mobile: "",
      codeUrl: window.location.href,
      share: {},
      cards: {}
    };
  },
  created() {
    this.doctor_id = this.$route.query.doctor_id;
    console.log(this.doctor_id);
    this.docontent(this.doctor_id);
    // this.getShareInfo(this.doctor_id);
  },
  computed: {
    textword() {
      if (!this.textcontent.length) return "";
      if (!this.unfold) {
        if (this.textcontent.length > 65) {
          this.unfoldshow = true;
          return this.textcontent.slice(0, 65) + "...";
        } else {
          return this.textcontent;
          this.unfoldshow = false;
        }
      } else {
        return this.textcontent;
      }
    }
  },
  methods: {
    // membersAuth(doctor_id){
    //   membersAuths(doctor_id).then(res=>{
    //     console.log(res)
    //   })
    // },
    //卡片信息
    docontent(doctor_id) {
      docdata(doctor_id, {
        url: window.location.href.split("&")[0]
        // url:"http://cs.cards.myzx.cn/home?doctor_id=26"
      }).then(res => {
        this.dInf = res.data.cards;
        this.diseaseList = res.data.cards.disease_view;
        for (let keys in this.diseaseList) {
          this.labels.push(this.diseaseList[keys].name);
        }
        this.shows = true;
        this.textcontent = this.dInf.good_at_tags;
        this.mobile = res.data.cards.mobile;
        this.share = res.data.share;
        this.cards = res.data.cards;
        this.getShareInfo(doctor_id);
      });
    },
    changeHandler(cur) {
      this.current = cur;
    },
    onScroll() {
      let scrolled =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.auto_fixed = {
        auto_fixed: true,
        fixed: scrolled >= this.header_height
      };
    },
    bindBtn(type) {
      userCheck({
        wx_openid: localStorage.openid,
        type: type
      }).then(res => {
        console.log(res);
        if (res.code == 200 && type == 1) {
          window.location.href = res.data.url;
        } else if (res.code == 200 && type == 2) {
          window.location.href = res.data.url;
        } else if(res.code == 3135){
          this.telBlock = true;
        }else{
          return false;
        }
      });
    },
    closechild(){
      this.telBlock=false;
    },
    //微信分享
    getShareInfo(doctor_id) {
      //拿到后端给的这些数据
      wx.config({
        debug: false, 
        appId: this.share.appId, // 必填，公众号的唯一标识，填自己的！
        timestamp: this.share.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
        nonceStr: this.share.nonceStr, // 必填，生成签名的随机串
        signature: this.share.signature, // 必填，签名，见附录1
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
      });
      wx.ready(() => {
        console.log("验证验证123");
        // let shareurl = "http://cs.cards.myzx.cn/home?doctor_id=" + doctor_id;
        let shareurl = window.location.href.split("&")[0];
        console.log(shareurl);
        //分享到朋友圈
        wx.onMenuShareTimeline({
          title: this.cards.name + "医生卡", // 分享时的标题
          desc: this.cards.brief,
          link: shareurl, // 分享时的链接
          imgUrl: this.cards.head, // 分享时的图标
          success: function() {
            console.log("分享成功");
          },
          cancel: function() {
            console.log("取消分享");
          }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
          title: this.cards.name + "医生卡", // 分享时的标题
          desc: this.cards.brief,
          link: shareurl, // 分享时的链接
          imgUrl: this.cards.head, // 分享时的图标
          success: function() {
            console.log("分享成功");
          },
          cancel: function() {
            console.log("取消分享");
          }
        });
      });
      wx.error(function(res) {
        console.log("报错" + res);
      });
    }


  },
  mounted() {
    let that = this;
    var times = setInterval(() => {
      if (this.shows) {
        this.$nextTick(function() {
          this.header_height = document.getElementById("header_nav").offsetTop;
          window.addEventListener("scroll", that.onScroll);
          clearInterval(times);
        });
      }
    }, 100);
  },
  watch: {
    $route: "docontent"
  }
};
</script>
<style scoped>
.exflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.doctorBox {
  width: 100%;
  background: url(../assets/telbg.png) no-repeat;
  background-size: contain;
  /* position: absolute; */
  top: 0;
  bottom: 0;
  font-size: 28px;
  line-height: 40px;
}
.humanCard {
  margin: 100px 30px 20px;
  position: relative;
  margin-top: 0;
  padding-top: 100px;
}
.cardBox {
  padding: 90px 20px 20px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
.headImg {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #e8e8e8;
  object-fit: cover;
  position: absolute;
  left: 30px;
  top:20px
}
.qrCodebg {
  width: 239px;
  height: 138px;
  position: absolute;
  top: 120px;
  right: 0;
  background: url(../assets/mabg.png) no-repeat;
  background-size: contain;
}
.qrCode {
  width: 120px;
  height: 120px;
  float: right;
  margin-right: 30px;
}
.cardtext b {
  font-size: 36px;
  font-weight: 600;
  line-height: 50px;
  margin: 0 5px 0 43px;
  letter-spacing: 10px;
}
.cardtext dt {
  display: flex;
  align-items: center;
}
.cardtext dt span {
  font-weight: 500px;
}
.medalicon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../assets/medal-icon.png);
  background-size: contain;
  margin-left: 10px;
}
.cardtext dd {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 15px 0 0;
}
.cardtext dd span {
  display: inline-block;
  padding: 5px 10px;
  background: rgba(0, 124, 255, 0.1);
  border-radius: 6px;
  color: #007cff;
  margin: 0 15px 15px 0;
}
.choicebar {
  margin: 10px 30px 40px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
.choicebar a {
  display: block;
  width: 330px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 28px;
  color: #333333;
  padding: 25px 0;
  box-sizing: border-box;
}
.choicebar img {
  width: 72px;
  height: 72px;
}
.choicebar span {
  display: inline-block;
  padding: 4px 20px;
  font-size: 24px;
  border-radius: 20px;
  margin-top: 20px;
}
.orange {
  color: orange;
  background: rgba(255, 136, 35, 0.1);
}
.green {
  color: #17ca8b;
  background: rgba(35, 213, 149, 0.1);
}
.introtext {
  position: relative;
}
.introBtn {
  position: absolute;
  right: 5px;
  bottom: 0;
  color: #999999;
}
.cube-scroll-wrapper {
  background-color: #fff;
}
.cube-sticky-fixed .sticky-header {
  margin: 0 10px;
  background-color: transparent;
}
.cube-tab-bar {
  background-color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.sticky-view-container {
  position: absolute;
  top: 45px;
  bottom: 0;
  left: 0;
  width: 100%;
}
.sticky-view-complex .sticky-view-container {
  position: absolute;
  top: 45px;
  bottom: 0;
  left: 0;
  width: 100%;
}
/* 滚动顶部 */
.cube-scroll-nav-bar {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px -5px 20px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(216, 216, 216, 0.5);
  z-index: 100;
}
.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
}
.auto_fixed {
  height: 80px;
}
.auto_fixed_fake {
  height: 80px;
}
#header_nav >>> .cube-scroll-nav-bar-item {
  font-size: 28px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 80px;
  padding: 0 25px;
}
#header_nav >>> .cube-scroll-nav-bar-item_active {
  color: #007cff;
  position: relative;
}
#header_nav >>> .cube-scroll-nav-bar-item_active span {
  position: relative;
  height: 76px;
  line-height: 76px;
  display: block;
}
#header_nav >>> .cube-scroll-nav-bar-item_active span {
  border-bottom: 4px solid #007cff;
}
#header_nav >>> .cube-scroll-wrapper {
  text-align: left;
}
.shade {
  position: fixed;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  z-index: 200;
}
.shade > div {
  width: 650px;
  background: #ffffff;
  border-radius: 16px;
  margin: auto;
  transform: translateY(50%);
  padding-bottom: 30px;
}
.close {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: -90px;
  left: 50%;
  transform: translateX(-50%);
}
/* .telsimg {
  font-size: 36px;
  text-align: center;
  padding: 50px 0;
}
.telsimg img {
  width: 298px;
  height: 312px;
}
.telsimg dd {
  margin-top: 20px;
}
.BtnVisit {
  border: none;
  width: 550px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: block;
  margin: 10px auto 20px;
  cursor: pointer;
  border-radius: 60px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 20px;
  background: linear-gradient(135deg, #31c1ff, #007cff);
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.5);
  color: #ffffff;
} */
/* .btnchoice{
  text-align: center;
  padding-bottom: 20px;
}
.btnchoice > a,
.btnchoice > button {
  display: inline-block;
  width: 259px;
  height: 102px;
  line-height: 100px;
  border-radius: 60px;
  font-size: 38px;
  letter-spacing: 10px;
  margin: 0 20px;
}
.cancel {
  border: 2px solid #007cff;
  color: #007cff;
  outline: none;
  background: transparent;
}
.retry {
  color: #ffffff;
  font-weight: 500;
  background: linear-gradient(135deg, #31c1ff, #007cff);
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.5);
} */
</style>